<template>
  <!-- 落地页链接 -->
  <div style="width:100%;padding: 5px 10px;">
    <div style="position: relative;" @mouseleave="outAction">
      <div class="mask" ref="parent" :style="{ 'height':screenWidth + 'px' }">
        <div class="image-mask" ref="child" @mouseenter="play($event)" @mouseleave="pause($event)">
          <img :src="linkData.thumbnail" alt="">
        </div>
      </div>
      <div class="action" v-if="is_action" @click="handleMenuClick">
        <slot name="clickUse"></slot>
      </div>
    </div>
    <div class="foot-title">
      <div class="a-link" :title="linkData.name">
        <a :href="linkData.thumbnail" target="_blank" >{{ linkData.name }}</a>
      </div>
      <div class="a-link" :title="linkData.siteId">
        {{ linkData.siteId }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    linkData:{
      type:Object,
      require:true
    }
  },
  data(){
    return {
      imageHeigth:200,
      is_action:false, // 鼠标移上显示 (点击使用)
      times:'',   // 定时器

      screenWidth:320, 
    }
  },
  methods:{
    play(e){
      this.is_action = true
      // 获取父盒子（肯定有滚动条）
      let parent = this.$refs.parent
      // 获取子盒子（高度肯定比父盒子大）
      let child = this.$refs.child
      let childHeight = child.scrollHeight - 300 // 子元素滚动条高度  300:本身高度
      // 设置定时器，时间即为滚动速度
      let num = 0
      this.times = setInterval( () => {
        if( num >= childHeight) {
          clearInterval(this.times)
        } else {
          parent.scrollTop += 5;
          num =  parent.scrollTop
        }
      }, 50);
    },
    // 点击选择
    handleMenuClick(){
      this.$emit('handleMenuClick')
    },
    pause(e){
      clearInterval(this.times)  //清楚定时器
      this.$refs.parent.scrollTo(0,0)
    },
    // 隐藏点击按钮
    outAction(){
      this.is_action = false
    }
  }
}
</script>

<style lang="less" scoped>
  .mask{
    width: 100%;
    // height: 320px;
    overflow: hidden;
    .image-mask{
      margin-bottom: 30px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .action{
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: white;
    background-color: #1890FF;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
  }
  .foot-title{
    width: 100%;
    padding: 10px;
    height: 60px;
    background-color: #FFFFFF;
  }
  // a标签文本超出
  .a-link {
    .mx-ellipsis(1);
  }
</style>